<template>
  <div class="dialog-footer">
    <el-button @click="handleCancel">
      {{ $t('common.cancelTxt') }}
    </el-button>
    
    <el-button 
      v-show="!previewVisible" 
      @click="handlePreview"
    >
      {{ $t('common.previewTxt') }}
    </el-button>
    
    <el-button 
      v-show="!previewVisible" 
      :loading="saveDraftLoading" 
      @click="handleSaveDraft"
    >
      {{ $t('course.saveDraft') }}
    </el-button>
    
    <el-button 
      v-show="!previewVisible" 
      type="primary" 
      :loading="submitLoading" 
      @click="handleSubmit"
    >
      {{ $t('common.submitTxt') }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { $t } from '#/locales';

interface Props {
  previewVisible: boolean;
  saveDraftLoading: boolean;
  submitLoading: boolean;
}

interface Emits {
  (e: 'cancel'): void;
  (e: 'preview'): void;
  (e: 'save-draft'): void;
  (e: 'submit'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

/**
 * 处理取消
 */
const handleCancel = () => {
  emit('cancel');
};

/**
 * 处理预览
 */
const handlePreview = () => {
  emit('preview');
};

/**
 * 处理保存草稿
 */
const handleSaveDraft = () => {
  emit('save-draft');
};

/**
 * 处理提交
 */
const handleSubmit = () => {
  emit('submit');
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
